<template>
  <div class="sign-detail-box">
    <!-- 标题 -->
    <mu-base-title title="服务详情" />
    <!-- 居民信息 -->
    <div class="mu-small-title ">居民信息</div>
    <mu-resident-detail :formData="residentData" />
    <!-- 签约信息 -->
    <div class="mu-small-title ">服务信息</div>
    <mu-detail-service :formData="serviceDetailData" />
    <!-- 按钮 -->
    <div class="btn-box mu-btn-box-top-style">
      <el-button v-show="serviceDetailData.state && btnName != 'none'" type="primary" class="update-btn">
        <router-link :to="`/service/update/${serviceDetailData._id}`">
          {{ btnName }}
        </router-link>
      </el-button>
      <el-button v-show="serviceDetailData.state == 2" type="primary" color="#3DD4A7" class="remind-pass-btn"
        @click="onRemind">
        提醒支付
      </el-button>
      <el-button v-show="serviceDetailData.state == 1" type="primary" color="#3DD4A7" class="remind-pass-btn"
        @click="onPass">
        审核通过
      </el-button>
      <el-button v-show="serviceDetailData.state == 1" type="primary" color="#FA746B" class="reject-btn"
        @click="onReject">驳回</el-button>
      <el-button @click="$router.back()" class="default-btn">返回</el-button>
    </div>
    <!-- 签约状态定位元素 -->
    <mu-state-circle :text="signStatesData[serviceDetailData.state]?.label"
      :color="signStatesData[serviceDetailData.state]?.color" />
  </div>
</template>

<script setup lang="ts">
import { getServicesFullDetailApi, updateServiceStateApi } from '@/api/service';
import { useFindData } from '@/composables/findData';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

const route: any = useRoute();

const { signStatesData, open, openPrompt } = useFindData();

// 居民信息 数据
const residentData: any = ref({});
// 签约详情 数据
const serviceDetailData: any = ref({});

const btnName = ref('');



onMounted(() => {
  btnName.value = JSON.parse(route.params._id).btnName;
  getServicesDetail(JSON.parse(route.params._id)._id);
});



// 事件：驳回 按钮 点击
const onReject = async () => {
  const value = await openPrompt('驳回原因：', '驳回确认');
  // 进if表示，用户点击确认 但 没写驳回原因
  if (!value) {
    ElMessage.error('驳回失败，请输入驳回原因');
    return;
  }
  // 进if表示，用户点击确认 并 写了驳回原因
  if (value) {
    updateServiceState(0, value, '已驳回');
  }
}

// 事件：通过审核 按钮 点击
const onPass = async () => {
  const isConfirm = await open('确定要通过审核吗？');
  // 进if表示，用户点击确认
  if (isConfirm) {
    updateServiceState(2);
  }
}

// 请求：修改服务状态
const updateServiceState = async (state: number, value = '', tip = '审核通过') => {
  // 签约状态：
  // 1 - 待审核（签约申请已提交）
  // 2 - 待支付（签约申请通过）
  // 3 - 已签约（居民已支付，签约生效中）
  // 4 - 待续约（签约已到期）
  // 0 - 已驳回
  const res = await updateServiceStateApi({
    serviceId: serviceDetailData.value._id,
    state,
    reason: value
  });
  if (res.code == 200) {
    ElMessage.success(tip);
    getServicesDetail(JSON.parse(route.params._id)._id);
  }
}

// 事件：提醒支付按钮点击
const onRemind = () => {
  ElMessage.success('提醒成功！');
}

// 请求：获取 服务详情
const getServicesDetail = async (_id: string) => {
  const res = await getServicesFullDetailApi({ _id });
  console.log(res);
  if (res.code == 200) {
    residentData.value = res.data.residentId ?? {};
    serviceDetailData.value = {
      ...res.data
    };
  }
};
</script>

<style scoped lang="scss">
.sign-detail-box {
  position: relative;

  .btn-box {
    color: #fff;

    button {
      border: none;
    }

    .update-btn {
      box-shadow: 0 0 8px var(--el-color-primary);

      a {
        // border: 1px solid purple;
        color: #fff;
      }
    }

    .remind-pass-btn {
      box-shadow: 0 0 8px #3DD4A7;
      color: #fff;
    }

    .reject-btn {
      box-shadow: 0 0 8px #FA746B;
      color: #fff;
    }

    .default-btn {
      border: 1px solid #ddd;
    }
  }
}
</style>